<template>
  <div class="app-container">
    <el-form :model="queryParams" ref="queryForm" :inline="true" label-width="68px">
      <!-- <el-form-item label="日期">
        <el-date-picker
          v-model="queryParams.patrolTime"
          size="small"
          style="width: 140px"
          value-format="yyyy-MM-dd"
        />
      </el-form-item> -->
      <el-form-item label="处理状态">
        <el-select 
        v-model="queryParams.handleStatus"
        placeholder="请选择"
        clearable
        size="small"
        style="width: 180px"
        >
          <el-option
            v-for="dict in handleStatusOptions"
            :key="dict.value"
            :label="dict.label"
            :value="dict.value"
          />
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
        <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
      </el-form-item>
    </el-form>

    <el-table v-loading="loading" :data="handleList">
      <el-table-column
        type="index"
        :index="table_index"
        label="序号"
        align="center"
      />
      <el-table-column label="id" align="center" prop="id" v-if="false" />
      <el-table-column label="责任人" align="center" prop="chargeTeacherName" :show-overflow-tooltip="true" />
      <el-table-column label="当日值班经理" align="center" prop="dutyManageName" :show-overflow-tooltip="true" />
      <el-table-column label="创建日期" align="center" prop="createDate" :show-overflow-tooltip="true" />
      <el-table-column label="实际处理人" align="center" prop="actualHandler" :show-overflow-tooltip="true" />
      <el-table-column label="处理日期" align="center" prop="handleDate" :show-overflow-tooltip="true" />
      <el-table-column label="处理信息" align="center" prop="handleInfo" :show-overflow-tooltip="true" />
      <el-table-column label="图片" align="center" prop="handleImg" :show-overflow-tooltip="true" >
        <template slot-scope="scope">
          <el-image 
            v-if="scope.row.handleImg"
            style="width: 50px; height: 40px"
            :src="getImgPath(scope.row.handleImg)"
            :preview-src-list="[getImgPath(scope.row.handleImg)]">
          </el-image>
        </template>
      </el-table-column>
      <el-table-column label="短信状态" align="center" prop="smsStatus" :show-overflow-tooltip="true" >
          <template slot-scope="scope">
              <el-tag type="success" v-if="scope.row.smsStatus==0">成功</el-tag>
              <el-tag type="info" v-if="scope.row.smsStatus==1">失败</el-tag>  
              <el-tag type="warning" v-if="scope.row.smsStatus==2">再次通知</el-tag>  
          </template>
      </el-table-column>
      <el-table-column label="处理状态" align="center" prop="handleStatus" :show-overflow-tooltip="true">
          <template slot-scope="scope">
              <el-tag type="warning" v-if="scope.row.handleStatus==0">待处理</el-tag>
              <el-tag type="success" v-if="scope.row.handleStatus==1">已处理</el-tag>  
          </template>
      </el-table-column>
      <el-table-column label="操作" width="100">
        <template slot-scope="scope">
          <el-button
            size="mini"
            type="text"
            @click="handleInfo(scope.row.patrolId)"
            >详情</el-button
          >
        </template>
      </el-table-column>
    </el-table>

    <pagination
      v-show="total>0"
      :total="total"
      :page.sync="queryParams.pageNum"
      :limit.sync="queryParams.pageSize"
      :page-sizes="[10, 20, 50, 100]"
      @pagination="getList"
    />

    <el-dialog 
      title="详情"
      :visible.sync="patrolVisible"
      width="1300px"
    >
      <el-table v-loading="patrolLoading" :data="patrolDetails" id="table">
        <el-table-column label="日期" align="center" prop="patrolTime" :show-overflow-tooltip="true"/>
        <el-table-column label="违纪学生" align="center" width="100" prop="studentName" :show-overflow-tooltip="true">
            <template slot-scope="scope">
                <label v-if="scope.row.patrolType!=3 && scope.row.patrolType!=4">{{scope.row.studentName}}</label>
                <label v-if="scope.row.patrolType==3 || scope.row.patrolType==4">全班</label>
            </template>
        </el-table-column>
        <el-table-column label="班级/宿舍" align="center" prop="className" :show-overflow-tooltip="true" >
          <template slot-scope="scope">
              <label v-if="scope.row.patrolType!=1 ">班级：{{scope.row.className}}</label>
              <label v-else style="color:blue">宿舍：{{scope.row.dormitoryNo}}</label>
          </template>
        </el-table-column>
        <el-table-column label="巡查区域" align="center" prop="patrolType" :show-overflow-tooltip="true" >
            <template slot-scope="scope">
                <el-tag v-if="scope.row.patrolType==1">宿舍巡查</el-tag>
                <el-tag v-if="scope.row.patrolType==2">入校/早操巡查</el-tag>
                <el-tag v-if="scope.row.patrolType==3">课堂巡查</el-tag>
                <el-tag v-if="scope.row.patrolType==4">午休巡查</el-tag>
                <el-tag v-if="scope.row.patrolType==5">晚自习巡查</el-tag>
                <el-tag v-if="scope.row.patrolType==6">课间巡查</el-tag>
            </template>
        </el-table-column>
        <el-table-column label="违纪类型/巡查状态" align="center" prop="dvType" :show-overflow-tooltip="true" >
            <template slot-scope="scope">
              <div v-if="scope.row.patrolType==1 || scope.row.patrolType==4">
                  <label v-if="scope.row.patrolStatus==1" style="color:blue">优秀</label>
                  <label v-if="scope.row.patrolStatus==2" style="color:#ffb100">良好</label>
                  <label v-if="scope.row.patrolStatus==3" style="color:red">差</label>
              </div>
              <div v-else-if="scope.row.patrolType==5">
                  <label v-if="scope.row.patrolType==5">{{getClassPatrolJson(scope.row.classPatrolJson)}} </label>
              </div>
              <div v-else>
                  <label v-if="scope.row.patrolType!=3">{{getDvType(scope.row)}} </label>
                  <label v-if="scope.row.patrolType==3">{{getClassPatrolJson(scope.row.classPatrolJson)}} </label>
              </div>
            
            </template>
        </el-table-column>
        <el-table-column label="备注" align="center" prop="describeTxt" :show-overflow-tooltip="true" />
        <el-table-column label="违纪登记人" align="center" prop="createBy" :show-overflow-tooltip="true" />
        <!-- <el-table-column label="通知责任人" align="center" prop="isInformCharge" :show-overflow-tooltip="true">
          <template slot-scope="scope">
            <el-tag type="info" v-if="scope.row.isInformCharge==0">未通知</el-tag>
            <el-tag type="success" v-if="scope.row.isInformCharge==1">已通知</el-tag>
          </template>
        </el-table-column> -->
        <el-table-column label="巡查图片" align="center" prop="patrolImg" :show-overflow-tooltip="true" >
          <template slot-scope="scope">
            <el-image 
              v-if="scope.row.patrolImg"
              style="width: 50px; height: 40px"
              :src="getImgPath(scope.row.patrolImg)"
              :preview-src-list="[getImgPath(scope.row.patrolImg)]">
            </el-image>
          </template>
        </el-table-column>
      </el-table>
    </el-dialog>
  </div>
</template>

<script>
import { getPageList } from "@/api/school/patrolHandle";
import { getSchoolPatrolById } from "@/api/school/patrol";

export default {
  name: "dvinfo",
  data() {
    return {
      // 遮罩层
      loading: true,
      patrolLoading:true,
      // 总条数
      total: 0,
      //数据列表
      handleList: [],
      patrolDetails:[],
      // 弹出层标题
      title: "",
      // 是否显示弹出层
      open: false,
      // 详情页
      patrolVisible:false,
      handleStatusOptions:[
        { 
          label:"待处理",
          value:"0"
        },{
          label:"已处理",
          value:"1"
        }
      ],
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        handleStatus:undefined
      },
      dvAreaList:[
          {"1":"班级"},
          {"2":"宿舍"},
          {"3":"校园内"}
      ],
      dvtypeList:[
          {"7":"迟到"},
          {"8":"未戴校牌"},
          {"9":"未穿校服"},
          {"6":"其他"},
          {"11":"校园抽烟"},
          {"12":"打架斗殴"},
          {"13":"打架斗殴"},
          {"10":"携带外卖"},
          {"14":"打牌赌博"},
          {"15":"翻爬围墙"},
          {"16":"谩骂他人"},
          {"11":"携带违禁品"}
      ]
    };
  },
  created() {
    this.getList();
  },
  methods: {
    /** 分页序号自增 */
    table_index(index) {
      return (
        (this.queryParams.pageNum - 1) * this.queryParams.pageSize + index + 1
      );
    },

    /** 搜索按钮操作 */
    handleQuery() {
      this.queryParams.pageNum = 1;
      this.getList();
    },

    /** 重置按钮操作 */
    resetQuery() {
      this.queryParams.handleStatus = undefined;
      this.handleQuery();
    },

    /** 查询任务量列表 */
    getList() {
      this.loading = true;
      getPageList(this.queryParams).then((response) => {
        this.handleList = response.data.list;
        // console.log(this.handleList);
        this.total = response.data.total;
        this.loading = false;
      });
    },

    handleInfo(patrolId){
      this.patrolVisible = true;
      this.patrolLoading = true;
      getSchoolPatrolById(patrolId).then((resp) => {
        // console.log(resp.data)
        this.patrolDetails = [resp.data];
        this.patrolLoading = false;
      })
    },

    getArea(row){
      const val = row.dvArea;
      for(let i=0;i<this.dvAreaList.length;i++){
        for(var key in this.dvAreaList[i]){
          if(key==val){
            return this.dvAreaList[i][key]
          }
        }
      }    
    },
    getDvType(row){
      const val = row.dvType;
      for(let i=0;i<this.dvtypeList.length;i++){
        for(var key in this.dvtypeList[i]){
          if(key==val){
            return this.dvtypeList[i][key]
          }
        }
      }
    },

    getImgPath(filename){
      let path = window.location.host
      if(path.indexOf("49")>=0){
        path = 'http://49.4.65.194:9092/app/common/downloadFileImg?filename='+filename
      } else if(path.indexOf("117")>=0){
        path = 'http://117.78.19.207:9091/app/common/downloadFileImg?filename='+filename
      } else{
        path = 'http://localhost:9091/app/common/downloadFileImg?filename='+filename
      }
      // console.log(path)/
      return path
    },
    getClassPatrolJson(jsonStr){
          let json = JSON.parse(jsonStr)
          let str = "";
          if(json.sleep != undefined){
              str += "睡觉:" + json.sleep + "人;"
          }
          if(json.phone != undefined){
              str += "玩手机:" + json.phone + "人;"
          }
          if(json.films != undefined){
              str += "看视频:" + json.films + "人;"
          }
          if(json.game != undefined){
              str += "玩游戏:" + json.game + "人;"
          }
          if(json.horseplay != undefined){
              str += "打闹:" + json.horseplay + "人;"
          }
          if(json.classStuNum != undefined){
              str += "教室总人数:" + json.classStuNum + "人;"
          }
          if(json.noSleep != undefined){
              str += "教室总人数:" + json.noSleep + "人;"
          }
          if(json.actArriveNum != undefined){
              str += "实到人数:" + json.actArriveNum + "人;"
          }
        return str
    },
  },
};
</script>

<style>
</style>